<!DOCTYPE html>
{% load static cache app_extras i18n %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="title_text">远程WebSSH</title>

    <script src="{%static 'idcops/js/jquery.min.js'%}"></script>
    <script src="{%static 'idcops/js/bootstrap.min.js'%}"></script>
    <link rel="stylesheet" href="{%static 'idcops/css/bootstrap.min.css'%}">
    <link rel="icon" href="{%static 'idcops/img/favicon.png'%}">
    <link rel="stylesheet" href="{%static 'idcops/xterm/xterm.css'%}">
    <link rel="stylesheet" href="{%static 'idcops/xterm/style.css'%}">
    <link href="{%static 'idcops/css/xterm.min.css'%}" rel="stylesheet" type="text/css"/>
    <link href="{%static 'idcops/css/fullscreen.min.css'%}" rel="stylesheet" type="text/css"/>
    <style>
      .row {
        margin-top: 15px;
        margin-bottom: 10px;
      }

      .col-sm-2 {
          color: black;
      }

      .container {
        margin-top: 20px;
      }

      .btn {
        margin-top: 15px;
          align-items: center;
      }

      .btn-danger {
        margin-left: 5px;
      }
      {% if font.family %}
      @font-face {
        font-family: '{{ font.family }}';
        src: url('{{ font.url }}');
      }

      body {
        font-family: '{{ font.family }}';
      }
      {% endif %}
    </style>
</head>

<!--body background = "{%static 'idcops/img/bg/0.jpeg'%}" style="background-repeat:no-repeat;background-size: 100%;background-attachment: fixed;">
<body style="background-color: black">
</body-->
<body background = "{%static 'idcops/img/bg/1.jpeg'%}" style="background-repeat:no-repeat;background-size: 100%;background-attachment: fixed;">
    <div style="margin-top: 30px; margin-left:300px; margin-right: 400px" id="form">
        <form class="form-horizontal">
            {% csrf_token %}
            {% for obj in queryset %}
            <div class="form-group">
                <label class="col-sm-2 control-label">设备名称：</label>
                <div class="col-sm-10">
                    <input type="text" disabled="disabled" class="input-width form-control" id="name" value={{ obj.name }} >
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">设备类型：</label>
                <div class="col-sm-10">
                    <input type="text" disabled="disabled" class="input-width form-control" id="devicetype" value={{ obj.devicetype }} >
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">设备IP地址：</label>
                <div class="col-sm-10">
                    <input type="text" disabled="readonly" class="input-width form-control" id="host" value={{ obj.ipaddr }} >
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">端口：</label>
                <div class="col-sm-10">
                    <input type="text" disabled="readonly" class="input-width form-control" id="port" value="22">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">用户名：</label>
                <div class="col-sm-10">
                    <input type="text" disabled="readonly" class="input-width form-control" id="user" value={{ obj.username }}>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">认证类型：</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" disabled="readonly" name="auth" id="inlineRadio1" value={{ obj.sshpwd }} checked> 密码认证
                    </label>
                    <label class="radio-inline">
                        <input type="radio" disabled="readonly" name="auth" id="inlineRadio2" value="key"> 秘钥认证
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">SSH密码：</label>
                <div class="col-sm-10">
                    <input type="text" disabled="readonly" class="input-width form-control" id="password" value={{ obj.sshpwd }}>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" style="font-weight: bold; font-size: 14px; color: #2b542c;">注意事项：</label>
                <div class="col-sm-10">
                    <label class="radio-inline" style="font-weight: bold; font-size: 14px; color: #2b542c;">
                        <input type="radio" disabled="readonly" checked> 交换机 / 路由器等网络类型的设备，请复制Enable密码，进入WebSSH后需输入！！！
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">ENABLE密码：</label>
                <div class="col-sm-10">
                    <input type="text" readonly class="input-width form-control" onclick="copy()" id="enpwd" value={{ obj.enpwd }}>
                    <p id="enpwd_msg" style="color: red">点击密码可以自动复制！</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">远程状态：</label>
                <div class="col-sm-10">
                    {% if obj.isremote == 'True' %}
                        <input type="text" disabled="readonly" class="input-width form-control" id="isremote" value="可以远程，请连接！">
                    {% elif obj.isremote == 'False' %}
                        <input type="text" disabled="readonly" class="input-width form-control" id="isremote" value="不能远程，请检查设备状态！">
                    {% else %}
                        <input type="text" disabled="readonly" class="input-width form-control" id="isremote" value={{ obj.isremote }}>
                    {% endif %}
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">秘钥文件：</label>
                <div class="col-sm-10">
                    <input type="file" id="pkey">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-10">
                    <span id="helpBlock" class="help-block">
                       注意:
                        <p style="color: red">1 . 当认证类型为密码认证时, 秘钥输入框的内容将被忽略;</p>
                        <p style="color: red">2 . 当认证类型为秘钥认证时, 如果密码输入框不为空, 则密码输入框的内容将作为秘钥的解密密码。</p>
                    </span>
                </div>
            </div>
            {% endfor %}

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10" align="center">
                    <button type="button" style="background-color: orange; font-weight: bold" class="btn btn-default" formtarget="_blank" onclick="websocket()">远程连接
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div id="django-webssh-terminal" class="hide">
        <div id="terminal"></div>
    </div>

<script src="{%static 'idcops/js/jquery.min.js'%}"></script>
<script src="{%static 'idcops/xterm/xterm.js'%}"></script>
<script src="{%static 'idcops/xterm/xterm-addon-fit.min.js'%}"></script>
<script src="{%static 'idcops/js/popper.min.js'%}"></script>
<script src="{%static 'idcops/js/webssh.js'%}"></script>
<script src="{%static 'idcops/js/websocket.js'%}"></script>
</body>
</html>

<script>
    function copy(){
        var enpwd=document.getElementById("enpwd");
        var enpwdmsg = document.getElementById("enpwd_msg");
        enpwd.select(); // 选择对象
        try{
            if(document.execCommand('copy', false, null)){
                document.execCommand("Copy");
                enpwdmsg.innerText="已复制！";
            }
            else{
                alert("复制失败!");
            }
        } catch(err){
            alert("复制失败!");
        }
    }

    function init(){ 　　
        var title = document.getElementById("title_text");
        var dev_name = document.getElementById("name");
        var dev_ip = document.getElementById("host");
        title.innerText = dev_name.value + dev_ip.value;
    }

    window.onload = init;

</script>